<template>
    <div id="app">
      <div class="header">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item to="/">Home</el-breadcrumb-item>
          <el-breadcrumb-item>Patient Page</el-breadcrumb-item>
        </el-breadcrumb>
        <div class="user-info">
          <el-icon @click="goToMessages" class="icon-button"><ChatLineRound /></el-icon>
            <span>消息</span>
          <el-icon @click="showUserProfile" class="icon-button"><User /></el-icon>
            <span>尊敬的{{ this.userName }}，您好！</span>
          <el-icon @click="logout" class="icon-button"><TopRight /></el-icon>
            <span>登出</span>
        </div>
      </div>
      <div class="content">
        <div class="sidebar">
          <h1>Patient Page</h1>
          <el-menu
            default-active="1"
            class="el-menu-vertical-demo"
            @open="handleOpen"
            @close="handleClose"
            background-color="#E0F7FA"
            text-color="#00796B"
            active-text-color="#004D40"
          >
            <el-menu-item index="1">
              <router-link to="/patient/appointment" class="nav-link">
                <el-icon><Calendar /></el-icon>
                <span>预约管理</span>
              </router-link>
            </el-menu-item>
            <el-menu-item index="2">
              <router-link to="/patient/profile" class="nav-link">
                <el-icon><User /></el-icon>
                <span>个人信息</span>
              </router-link>
            </el-menu-item>
            <!-- <el-menu-item index="3">
              <router-link to="/patient/settings" class="nav-link">
                <el-icon><Setting /></el-icon>
                <span>设置</span>
              </router-link>
            </el-menu-item> -->
            <el-menu-item index="4">
              <router-link to="/patient/medical-record" class="nav-link">
                <el-icon><Document /></el-icon>
                <span>诊断管理</span>
              </router-link>
            </el-menu-item>
            <el-menu-item index="5">
              <router-link to="/patient/comment" class="nav-link">
                <el-icon><Medal /></el-icon>
                <span>评价管理</span>
              </router-link>
            </el-menu-item>
            <el-menu-item index="6">
              <router-link to="/patient/payment" class="nav-link">
                <el-icon><Money /></el-icon>
                <span>账单管理</span>
              </router-link>
            </el-menu-item>
            <el-menu-item index="7">
              <router-link to="/patient/patientmessage" class="nav-link">
                <el-icon><ChatLineRound /></el-icon>
                <span>消息</span>
              </router-link>
            </el-menu-item>
            <el-menu-item index="8">
              <router-link to="/patient/patientnotice" class="nav-link">
                <el-icon><ChatLineRound /></el-icon>
                <span>公告</span>
              </router-link>
            </el-menu-item>
          </el-menu>
        </div>
        <main class="main">
          <router-view></router-view>
        </main>
      </div>
    </div>
  </template>
  
  <script>
  import {ElMessage} from 'element-plus';
  export default {
    components : {ElMessage},
    name: 'PatientPage',
    data() {
      return {
        userName: this.$store.state.userName
      };
    },
    methods: {
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      },
      goToMessages() {
        this.$router.push('/patient/message');
      },
      showUserProfile() {
        this.$router.push('/patient/profile');
      },
      logout() {
        // 处理登出逻辑
        this.$store.commit('SET_ROLE', '');
        this.$router.push('/');
        ElMessage.success('登出成功！');
        console.log('User logged out');
      }
    }
  }
  </script>
  
  <style scoped>
  #app {
    display: flex;
    flex-direction: column;
    height: 100vh;
  }
  
  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    background-color: #D7D9CE;
  }
  
  .user-info {
    display: flex;
    align-items: center;
  }
  
  .icon-button {
    cursor: pointer;
    margin-left: 15px;
  }
  
  .content {
    display: flex;
    flex: 1;
  }
  
  .sidebar {
    width: 250px;
    background-color: #e2eff0;
    color: #D7D9CE;
    padding: 20px;
  }
  
  .sidebar h1 {
    color: #13505B;
    font-size: 24px;
    margin-bottom: 20px;
  }
  
  .main {
    flex: 1;
    padding: 20px;
    overflow-y: auto;
    background: linear-gradient(to right, #e2eff0, #e9eff8); /* 渐变颜色 */
}

  
  .el-menu-vertical-demo {
    border-right: none;
  }
  
  .el-menu-item {
    padding: 0;
  }
  
  .nav-link {
    display: flex;
    align-items: center;
    color: inherit;
    text-decoration: none;
    padding: 10px 20px;
  }
  
  .nav-link el-icon {
    margin-right: 10px;
    font-size: 16px; /* 默认字体大小 */
    
  }
  
  
  .nav-link.router-link-active {
    color: #1044ec;
    font-size: 24px;
    transition: font-size 0.3s ease-in-out, color 0.3s ease-in-out; /* 添加过渡效果 */
  }
  </style>
  